<template>
  <f7-page>
    <f7-navbar :title="$t('m.deposit')" back-link=" "></f7-navbar>

    <div class="content-padding margin-t20">
      <f7-list class="address-list">
        <f7-list-item class="line-input-f7-list-item" :title="$t('m.address')">
          <div slot="after" class="address-inner">
            {{address}}
          </div>
        </f7-list-item>
        <f7-list-item class="line-input-f7-list-item" :title="$t('m.amount')">
          <input type="text" :placeholder="$t('m.amountPlaceholder')" slot="after">
        </f7-list-item>
      </f7-list>

      <div class="my-card margin-t20" v-if="id === '1'">
        <p>{{$t('m.chainType')}}</p>
        <single-select class="margin-t20" v-model="lianType">
<!--          <single-select-item :value="1">OMNI</single-select-item>-->
          <single-select-item :value="2">ERC20</single-select-item>
        </single-select>
      </div>
    </div>
    <div class="code-box">
      <div>
<!--        <img src="../static/code.png" alt="">-->
        <canvas id="canvas"></canvas>
      </div>
      <f7-button fill color="blue" @click="copyAddress">{{$t('m.clickToCopyTheDepositAddress')}}</f7-button>
    </div>

   <!-- <div class="tips-container">
      <p>{{$t('m.wenxinTips')}}:</p>
      爱上飞机爬山法阿斯蒂芬怕时代峻峰片健身房<br>
      asdfafsdasdfdfjapsffasfaspfjasf<br>
    </div>-->
  </f7-page>
</template>

<script>
  import SingleSelect from '../ajComponents/singleSelect/singleSelect';
  import SingleSelectItem from '../ajComponents/singleSelect/singleSelectItem';
  import { getRechargeAddress } from "../api/home";
  import QRCode from 'qrcode'

  export default {
    name: "deposit",
    data () {
      return {
        lianType: 2,
        address: ''
      }
    },
    computed: {
      id() {
        return this.$f7route.context.id
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      useQrCode(url){
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, url, function (error) {
          if (error) console.error(error)
          console.log('QRCode success!');
        })
      },
      init () {
        getRechargeAddress({currency_id: this.id}).then(res => {
          this.address = res.data.num_in_address;
          this.useQrCode(res.data.num_in_address);
        })
      },
      copyAddress() {
        this.$copyText(this.address).then((e) => {
          this.$toast('复制成功');
        }, (e) => {
          this.$toast('复制失败，请手动复制');
        })
      }
    },
    components: {
      SingleSelect,
      SingleSelectItem,
      QRCode
    }
  }
</script>

<style scoped lang="scss">
  .code-box {
    width: 50%;
    margin: 80px auto 0;
    text-align: center;
    > div {
      margin: 0 auto;
      padding: $padding20;
      img {

      }
    }
    .button {
      width: 250px;
      margin: $padding auto 0;
    }
  }
  .address-list /deep/ .item-after {
    overflow: hidden;
  }
  .address-inner {
    word-break: break-all;
    white-space: normal;
    font-size: 26px;
  }
</style>
